import { Layout } from 'antd';
import React, { useState } from 'react';
const { Content, Footer } = Layout;
import Menus from '/@/Layouts/component/Sidebar/MenusItem';
import { Outlet } from 'react-router-dom';
import NarBar from '/@/Layouts/component/navBar/index';
import styles from '/@/Layouts/index.module.scss';
import GlobalContext from '/@/Layouts/GlobalContext';
import TagsView from '/@/Layouts/component/TagsView';
import { t } from 'i18next';
import { useStateThemeConfig } from '/@/store/hooks/theme';
import { useStateCurrFull } from '/@/store/hooks/menu';
import CloseFull from '/@/Layouts/component/CloseFull';
export default function Defaults() {
  const [collapsed, setCollapsed] = useState(false);
  const isLockScreen = useStateCurrFull();

  const { topBarHight, IsfixedHead, IsTagsView, IsFooter } = useStateThemeConfig();
  const shrinkFun = () => {
    setCollapsed((collapsed) => !collapsed);
  };

  return (
    <GlobalContext.Provider value={{ collapsed, shrinkFun }}>
      {isLockScreen && <CloseFull></CloseFull>}
      <Layout className={styles.Layout}>
        {!isLockScreen && <Menus />}
        <Layout style={{ overflow: 'auto' }}>
          <div style={{ position: IsfixedHead ? 'sticky' : 'unset', top: 0, zIndex: 1, width: '100%' }}>
            {!isLockScreen && (
              <NarBar
                className={styles.layout_navbar}
                style={{
                  height: topBarHight + 'px',
                  lineHeight: topBarHight + 'px',
                }}
              ></NarBar>
            )}
            {!isLockScreen && IsTagsView && <TagsView></TagsView>}
          </div>
          <Content>
            <div style={{ padding: '15px' }}>
              <Outlet></Outlet>
            </div>
            {IsFooter && (
              <Footer className={styles['layout_footer']}>
                <div>react-antd-admin，Made by lyt with ❤️</div>
                <div>{t('layout.footer')}</div>
              </Footer>
            )}
          </Content>
        </Layout>
      </Layout>
    </GlobalContext.Provider>
  );
}
